<template lang="html">
  <div class="page-scroll-view">
    <div class="demo-flex p20">
      <page-header title="Flex 布局方案" subTitle="更好，更简单的栅格系统"></page-header>

      <h3>栅格系统</h3>
      <p>特点：</p>
      <ul>
        <li>每个栅格应同宽同高，平分空间</li>
        <li>可定义独立的栅格宽度，其它的栅格平分空间</li>
        <li>支持响应式布局</li>
        <li>支持垂直水平各方向对齐</li>
        <li>可以任意的嵌套</li>
        <li>可以自定义顺序</li>
      </ul>

      <h4>基础栅格系统</h4>
      <p>每项宽度相同，自然平分，高度默认都相同</p>
      <div class="box">
        <div data-flex="gutter">
          <div data-cell><div class="item">auto</div></div>
          <div data-cell><div class="item">auto</div></div>
          <div data-cell><div class="item">auto</div></div>
          <div data-cell><div class="item">auto</div></div>
          <div data-cell><div class="item">auto</div></div>
        </div>
        <div data-flex="gutter">
          <div data-cell><div class="item">1/2</div></div>
          <div data-cell><div class="item">1/2</div></div>
        </div>
        <div data-flex="gutter">
          <div data-cell><div class="item">1/3</div></div>
          <div data-cell><div class="item">1/3</div></div>
          <div data-cell><div class="item">1/3</div></div>
        </div>
        <div data-flex="gutter row">
          <div data-cell><div class="item">1/4</div></div>
          <div data-cell><div class="item">1/4</div></div>
          <div data-cell><div class="item">1/4</div></div>
          <div data-cell><div class="item">1/4</div></div>
        </div>
        <div data-flex="gutter row">
          <div data-cell><div class="item">1/5</div></div>
          <div data-cell><div class="item">1/5</div></div>
          <div data-cell><div class="item">1/5</div></div>
          <div data-cell><div class="item">1/5</div></div>
          <div data-cell><div class="item">1/5</div></div>
        </div>
        <div data-flex="gutter row">
          <div data-cell><div class="item">1/6</div></div>
          <div data-cell><div class="item">1/6</div></div>
          <div data-cell><div class="item">1/6</div></div>
          <div data-cell><div class="item">1/6</div></div>
          <div data-cell><div class="item">1/6</div></div>
          <div data-cell><div class="item">1/6</div></div>
        </div>
        <div data-flex="gutter">
          <div data-cell="flex">
            <div class="item">即使只有一行字，高度也会与同级最大项的高度一致</div>
          </div>
          <div data-cell>
            <div class="item">
              每一行里的每一个栅格默认都是同宽同高。默认自适应。
              为了足够灵活，能够添加尺寸属性到单独的栅格中。
              没有添加的，仍然简单地平分剩下的可用空间。
              每一个栅格可以在纯直方向上置顶，置底，剧中。
            </div>
          </div>
        </div>
      </div>

      <h4>固定宽度和自适应宽度</h4>
      <p>相对的固定宽度与自适应宽度共存</p>
      <div class="box">
        <div data-flex="gutter row">
          <div data-cell="1/2"><div class="item">1/2</div></div>
          <div data-cell><div class="item">auto</div></div>
          <div data-cell><div class="item">auto</div></div>
        </div>
        <div data-flex="gutter row">
          <div data-cell><div class="item">auto</div></div>
          <div data-cell="1/3"><div class="item">1/3</div></div>
          <div data-cell><div class="item">auto</div></div>
        </div>
        <div data-flex="gutter row">
          <div data-cell="1/3"><div class="item">1/3</div></div>
          <div data-cell><div class="item">auto</div></div>
          <div data-cell="1/4"><div class="item">1/4</div></div>
        </div>
        <div data-flex="gutter row">
          <div data-cell="1/3"><div class="item">1/3</div></div>
          <div data-cell><div class="item">auto</div></div>
        </div>
      </div>

      <h4>响应式</h4>
      <p>响应式栅格系统通过添加媒体查询到栅格元素或栅格容器来实现。当满足媒体查询的条件时，栅格系统就能自动调整。</p>
      <p>在屏幕宽度小于768时，以100%的宽度展示，调整你的浏览器，查看效果。</p>
      <div class="box">
        <div data-flex="full gutter">
          <div data-cell><div class="item">full/auto</div></div>
          <div data-cell><div class="item">full/auto</div></div>
          <div data-cell><div class="item">full/auto</div></div>
        </div>
      </div>

      <h4>对齐</h4>
      <div class="box">
        <h5>置顶对齐</h5>
        <div data-flex="gutter">
          <div data-cell> <div class="item">置顶对齐</div></div>
          <div data-cell> <div class="item">Pellentesque sagittis vel erat ac laoreet. Phasellus ac aliquet enim, eu aliquet sem.</div></div>
          <div data-cell> <div class="item">置顶对齐</div></div>
        </div>
        <h5>置底对齐</h5>
        <div data-flex="gutter cross-end">
          <div data-cell> <div class="item">置底对齐</div></div>
          <div data-cell> <div class="item">Pellentesque sagittis vel erat ac laoreet. Phasellus ac aliquet enim, eu aliquet sem.</div></div>
          <div data-cell> <div class="item">置底对齐</div></div>
        </div>
        <h5>居中对齐</h5>
        <div data-flex="gutter cross-center">
          <div data-cell> <div class="item">居中对齐</div></div>
          <div data-cell> <div class="item">Pellentesque sagittis vel erat ac laoreet. Phasellus ac aliquet enim, eu aliquet sem.</div></div>
          <div data-cell> <div class="item">居中对齐</div></div>
        </div>
        <h5>混合对齐</h5>
        <div data-flex="gutter">
          <div data-cell="start"> <div class="item">居顶对齐</div></div>
          <div data-cell="start"> <div class="item">Pellentesque sagittis vel erat ac laoreet. Phasellus ac aliquet enim, eu aliquet sem.</div></div>
          <div data-cell="center"> <div class="item">居中对齐</div></div>
          <div data-cell="end"> <div class="item">居底对齐</div></div>
        </div>
        <div data-flex="gutter main-start">
          <div data-cell="1/5"> <div class="item">居左对齐</div></div>
        </div>
        <div data-flex="gutter main-center">
          <div data-cell="1/5"> <div class="item">居中对齐</div></div>
        </div>
        <div data-flex="gutter main-end">
          <div data-cell="1/5"> <div class="item">居右对齐</div></div>
        </div>
        <h5>两端对齐</h5>
        <div data-flex="gutter main-between">
          <div data-cell="1/5"> <div class="item">两端对齐</div></div>
          <div data-cell="1/5"> <div class="item">两端对齐</div></div>
          <div data-cell="1/5"> <div class="item">两端对齐</div></div>
        </div>
        <h5>分散对齐</h5>
        <div data-flex="gutter main-around">
          <div data-cell="1/5"> <div class="item">分散对齐</div></div>
          <div data-cell="1/5"> <div class="item">分散对齐</div></div>
          <div data-cell="1/5"> <div class="item">分散对齐</div></div>
        </div>
      </div>

      <h4>栅格嵌套</h4>
      <div class="box">
        <p>栅格可以无限嵌套在另一个栅格中</p>
        <div data-flex="gutter">
          <div data-cell>
            <div class="item">
              <div data-flex="gutter">
                <div data-cell><div class="item">1</div></div>
                <div data-cell>
                  <div class="item">
                    <div data-flex="gutter">
                      <div data-cell><div class="item">2</div></div>
                      <div data-cell><div class="item">2</div></div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div data-cell="1/4"><div class="item">1/4</div></div>
        </div>
      </div>

      <h5>自定义顺序</h5>
      <div class="box">
        <div data-flex="gutter">
          <div data-cell="order5"><div class="item">1</div></div>
          <div data-cell="order3"><div class="item">2</div></div>
          <div data-cell="order2"><div class="item">3</div></div>
          <div data-cell="order1"><div class="item">4</div></div>
          <div data-cell="order4"><div class="item">5</div></div>
        </div>
      </div>

      <h5>圣杯布局</h5>
      <div class="box">
        <div class="holy-grail" data-flex="column">
          <header class="holy-grail_hd" data-cell="flex0"><nav></nav></header>
          <main class="holy-grail_bd" data-cell data-flex>
            <aside class="holy-grail_bd-left" data-cell="1/4 order1"></aside>
            <aside class="holy-grail_bd-right" data-cell="1/4 order3"></aside>
            <section class="holy-grail_bd-center" data-cell="order2">
              <article class="p20">
              <h1>Internet Explorer 9</h1>
              <p>Windows Internet Explorer 9（简称 IE9）于 2011 年 3 月 14 日发布.....</p>
              </article>
            </section>
          </main>
          <footer class="holy-grail_ft" data-cell="flex0"></footer>
        </div>
      </div>

      <h2>骰子布局</h2>
      <div class="box" data-flex="row wrap">
      <div class="first-face" data-flex="center">
        <span class="pip"></span>
      </div>
      <div class="second-face" data-flex="main-between">
      <span class="pip"></span>
      <span class="pip" data-cell="end flex0"></span>
      </div>
      <div class="third-face" data-flex="main-between">
      <span class="pip"></span>
      <span class="pip" data-cell="center flex0"></span>
      <span class="pip" data-cell="end flex0"></span>
      </div>
      <div class="fourth-face" data-flex="main-between">
      <div class="column" data-flex="column main-between" data-cell="flex flex0">
          <span class="pip"></span>
          <span class="pip"></span>
      </div>
      <div class="column" data-flex="column main-between" data-cell="flex flex0">
        <span class="pip"></span>
        <span class="pip"></span>
      </div>
      </div>
      <div class="fifth-face" data-flex="main-between">
      <div class="column" data-flex="column main-between" data-cell="flex flex0">
        <span class="pip"></span>
        <span class="pip"></span>
      </div>
      <div class="column" data-flex="column main-center" data-cell="flex flex0">
        <span class="pip"></span>
      </div>
      <div class="column" data-flex="column main-between" data-cell="flex flex0">
        <span class="pip"></span>
        <span class="pip"></span>
      </div>
      </div>
      <div class="sixth-face" data-flex="main-between">
        <div class="column" data-flex="column main-between" data-cell="flex flex0">
          <span class="pip"></span>
          <span class="pip"></span>
          <span class="pip"></span>
        </div>
        <div class="column" data-flex="column main-between" data-cell="flex flex0">
          <span class="pip"></span>
          <span class="pip"></span>
          <span class="pip"></span>
        </div>
      </div>
      <div class="sixth-face" data-flex="main-between">
        <div class="column" data-flex="column main-between" data-cell="flex flex0">
          <span class="pip"></span>
          <span class="pip"></span>
          <span class="pip"></span>
        </div>
        <div class="column" data-flex="column main-between" data-cell="flex flex0">
          <span class="pip"></span>
          <span class="pip"></span>
          <span class="pip"></span>
        </div>
        <div class="column" data-flex="column main-between" data-cell="flex flex0">
          <span class="pip"></span>
          <span class="pip"></span>
          <span class="pip"></span>
        </div>
      </div>
      </div>
    </div>
    </div>
</template>

<script>
import PageHeader from './p-page-header'

export default {
  name: 'demo-flex',
  components: {
    'page-header': PageHeader,
  }
}
</script>

<style lang="less">

.demo-flex { font-size: 24px; }
.demo-flex li{list-style: none;}
.demo-flex h2 {font-weight: 600; font-size: 32px;;  margin: 0 0 10px;}
.demo-flex h3 {margin: 24px 0 16px;}
.demo-flex h4,h5 {margin: 12px 0;}

.box {
  margin: 10px 0 20px 0;
}
.item {
  padding: 10px;
  background: hsla(31,15%,50%,.1);
  border-radius: 3px;
  text-align: center;
}

[class$="face"] {
  margin: 16px;
  padding: 4px;

  background-color: #e7e7e7;
  width: 104px;
  height: 104px;
  object-fit: contain;

  box-shadow:
    inset 0 5px white,
    inset 0 -5px #bbb,
    inset 5px 0 #d7d7d7,
    inset -5px 0 #d7d7d7;

  border-radius: 10%;
}

.pip {
  display: block;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  margin: 4px;

  background-color: #333;
  box-shadow: inset 0 3px #111, inset 0 -3px #555;
}

.holy-grail{
  min-height: 500px;
  color:#fff;
}

.holy-grail_hd{
  height: 80px;
  background: #5C747F;
}
.holy-grail_bd{
  background: #34CFBE;
  &-left{
    background: #32C5BD;
  }
  &-center{
    background: #483C6C;
  }
  &-right{
    background: #FE5E78;
  }
}
.holy-grail_ft{
  height: 80px;
  background: #00675C;
}

</style>
